---
title: Référence des importations
description: Découvrez comment importer différents types de fichiers dans votre projet Astro.
i18nReady: true
---
import RecipeLinks from "~/components/RecipeLinks.astro";
import ReadMore from '~/components/ReadMore.astro'

Astro prend en charge la plupart des ressources statiques sans aucune configuration requise. Vous pouvez utiliser la directive `import` n'importe où dans votre projet JavaScript (y compris votre *frontmatter* d'Astro) et Astro inclura une copie générée et optimisée de cette ressource statique dans votre compilation finale. `@import` est également prise en charge dans les balises CSS et `<style>`.

## Types de fichiers pris en charge

Les types de fichiers suivants sont pris en charge par Astro :

- Composants Astro (`.astro`)
- Markdown (`.md`, `.markdown`, etc.)
- JavaScript (`.js`, `.mjs`)
- TypeScript (`.ts`)
- Paquets NPM
- JSON (`.json`)
- CSS (`.css`)
- Modules CSS (`.module.css`)
- Images et ressources (`.svg`, `.jpg`, `.png`, etc.)

De plus, vous pouvez étendre Astro pour ajouter la prise en charge de différents [frameworks UI](/fr/guides/framework-components/) comme React, Svelte et Vue. Vous pouvez également installer l'[intégration MDX d'Astro](/fr/guides/integrations-guide/mdx/) ou l'[intégration Markdoc d'Astro](/fr/guides/integrations-guide/markdoc/) pour utiliser les fichiers `.mdx` ou `.mdoc` dans votre projet.

### Les fichiers dans `public/`

Vous pouvez placer n'importe quelle ressource statique dans le répertoire [`public/`](/fr/basics/project-structure/#public) de votre projet, et Astro le copiera directement dans votre version finale sans y toucher. Les fichiers dans le répertoire `public/` ne sont pas générés ou regroupés par Astro, ce qui signifie que n'importe quel type de fichier est pris en charge.

Vous pouvez référencer un fichier `public/` par un chemin d'URL directement dans vos modèles HTML.

```astro
// Pour faire un lien vers /public/reports/annual/2024.pdf
Télécharger la <a href="/reports/annual/2024.pdf">déclaration annuelle 2024 en PDF</a>.

// Pour afficher /public/assets/cats/ginger.jpg
<img src="/assets/cats/ginger.jpg" alt="Un chat orange dort sur un lit.">
```

## Instructions d'importation

Astro utilise ESM, la même syntaxe [d'importation (`import`)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/import) et [d'exportation (`export`)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/export) que celle prise en charge dans le navigateur.

## JavaScript

```js
import { getUser } from './user.js';
```

JavaScript peut être importé en utilisant la syntaxe normale d'importation et d'exportation d'ESM.

:::note[Importer des fichiers JSX]

Un [framework UI](/fr/guides/framework-components/) approprié ([React](/fr/guides/integrations-guide/react/), [Preact](/fr/guides/integrations-guide/preact/) ou [Solid](/fr/guides/integrations-guide/solid-js/)) est requis pour restituer les fichiers JSX/TSX.
Utilisez les extensions `.jsx`/`.tsx` le cas échéant, car Astro ne prend pas en charge JSX dans les fichiers `.js`/`.ts`.

:::

## TypeScript

```js
import { getUser } from './user.ts';
import type { UserType } from './user.ts';
```

Astro comprend une prise en charge intégrée pour [TypeScript] (https://www.typescriptlang.org/). Vous pouvez importer des fichiers `.ts` et `.tsx` directement dans votre projet Astro, et même écrire du code TypeScript directement dans votre [script de composant Astro](/fr/basics/astro-components/#le-script-du-composant) et dans n'importe quelle [balise de scripts](/fr/guides/client-side-scripts/).

**Astro n'effectue aucune vérification de type lui-même.** La vérification de type doit être prise en charge en dehors d'Astro, soit par votre IDE, soit par un script séparé. Pour vérifier le type des fichiers Astro, la commande [`astro check`](/fr/reference/cli-reference/#astro-check) est fournie.

:::note[TypeScript et les extensions de fichiers]
Selon les [règles de résolution des modules TypeScript](https://www.typescriptlang.org/docs/handbook/module-resolution.html), les extensions de fichiers `.ts` et `.tsx` ne doivent pas être utilisées lors de l'importation de fichiers TypeScript. À la place, utilisez les extensions de fichiers `.js`/`.jsx` ou omettez complètement l'extension de fichier.

```ts
import { getUser } from './user.js'; // user.ts
import MyComponent from "./MyComponent"; // MyComponent.tsx
```

:::

<ReadMore>En savoir plus sur la [prise en charge de TypeScript dans Astro](/fr/guides/typescript/).</ReadMore>


## Paquets NPM

Si vous avez installé un paquet NPM, vous pouvez l'importer dans Astro.

```astro
---
import { Icon } from 'astro-icon';
---
```
Si un paquet a été publié en utilisant un ancien format, Astro essaiera de convertir le paquet en ESM pour que les instructions d'importation (`import`) fonctionnent. Dans certains cas, vous devrez ajuster votre [config `vite`](/fr/reference/configuration-reference/#vite) pour que cela fonctionne.

:::caution
Certains paquets s'appuient sur l'environnement du navigateur. Les composants Astro s'exécutent sur le serveur ; l'importation de ces paquets dans le frontmatter peut donc [entraîner des erreurs](/fr/guides/troubleshooting/).
:::

## JSON

```js
// Charge l'objet JSON via l'exportation par défaut
import json from './data.json';
```

Astro prend en charge l'importation de fichiers JSON directement dans votre application. Les fichiers importés retournent l'objet JSON complet dans l'importation par défaut.

## CSS

```js
// Charge et intègre 'style.css' sur la page
import './style.css';
```

Astro prend en charge l'importation de fichiers CSS directement dans votre application. Les styles importés ne nécessitent pas d'exportations, mais l'importation d'un style ajoutera automatiquement ce style à la page. Cela fonctionne pour tous les fichiers CSS par défaut, et peut prendre en charge les langages CSS compilés comme Sass et Less via des modules d'extension.

<ReadMore>En savoir plus sur les cas d'utilisation avancés d'importation CSS tels qu'une référence d'URL directe pour un fichier CSS ou l'importation de CSS sous forme de chaîne de caractères dans le [guide de mise en forme](/fr/guides/styling/#avancé)</ReadMore>

## Modules CSS

```jsx
// 1. Convertit les noms de classes './style.module.css' en valeurs uniques, portées.
// 2. Retourne un objet qui associe les noms de classes d'origine à leur valeur portée finale.
import styles from './style.module.css';

// Cet exemple utilise JSX, mais vous pouvez utiliser les modules CSS avec n'importe quel Framework.
return <div className={styles.error}>Votre message d'erreur</div>;
```

Astro prend en charge les modules CSS en utilisant la convention de nommage `[nom].module.css`. Comme tout fichier CSS, l'importation d'un module CSS l'appliquera automatiquement à la page. Cependant, les modules CSS exportent un objet spécial par défaut `styles` qui fait correspondre vos noms de classe originaux à des identifiants uniques.

Les modules CSS vous aident à appliquer la portée et l'isolation des composants sur le frontend grâce à des noms de classe générés de manière unique pour vos feuilles de style.

## Autres ressources

```jsx
// Renvoie un objet avec `src` et d'autres propriétés
import imgReference from './image.png';
import svgReference from './image.svg';

// Les composants HTML ou de framework UI utilisent ceci pour restituer l'image
<img src={imgReference.src} alt="description de l'image" />;

// Les composants `<Image />` et `<Picture />` d'Astro accèdent à `src` par défaut
<Image src={imgReference} alt="description de l'image">
```

Toutes les autres ressources qui ne sont pas explicitement mentionnées ci-dessus peuvent être importées via une importation ESM (`import`) et renverront une référence d'URL vers la ressource finale générée (par exemple `/_astro/ma-video.C7vXpQtF.mp4`) au lieu d'un objet.

Cela peut être utile pour référencer des ressources non JS par URL, comme la création d'un élément vidéo avec un attribut `src` pointant vers cette image.

Il peut également être utile de placer des images et d'autres ressources dans le dossier `public/` comme expliqué sur la [page de structure du projet](/fr/basics/project-structure/#public).

<ReadMore>Découvrez comment ajouter des paramètres d'importation Vite (par exemple `?url` ou `?raw`) dans [le guide de gestion des ressources statiques de Vite](https://vite.dev/guide/assets.html)</ReadMore>

:::note
L'ajout d'un **texte alternatif (alt)** aux balises `<img>` est encouragé pour des raisons d'accessibilité ! N'oubliez pas d'ajouter un attribut `alt="une description utile"` à vos éléments d'image. Vous pouvez laisser l'attribut vide si l'image est purement décorative.
:::

## Alias

Un **alias** est une façon de créer des raccourcis pour vos importations.

Les alias peuvent aider à améliorer l'expérience de développement dans les bases de code avec de nombreux dossiers ou importations relatives.

```astro title="src/pages/about/company.astro" del="../../components" del="../../assets"
---
import Button from '../../components/controls/Button.astro';
import logoUrl from '../../assets/logo.png?url';
---
```

Dans cet exemple, un développeur devra comprendre la relation de l'arborescente entre `src/pages/about/company.astro`, `src/components/controls/Button.astro`, et `src/assets/logo.png`. Et si le fichier `company.astro` devait être déplacé, ces importations devraient également être mises à jour.

Vous pouvez ajouter des alias d'importation dans `tsconfig.json`.

```json title="tsconfig.json" ins={4-5}
{
  "compilerOptions": {
    "paths": {
      "@components/*": ["./src/components/*"],
      "@assets/*": ["./src/assets/*"]
    }
  }
}
```

Le serveur de développement redémarrera automatiquement après ce changement de configuration. Vous pouvez maintenant importer en utilisant les alias n'importe où dans votre projet :

```astro title="src/pages/about/company.astro" ins="@components" ins="@assets"
---
import Button from '@components/controls/Button.astro';
import logoUrl from '@assets/logo.png?url';
---
```

## `import.meta.glob()`

L'utilitaire [`import.meta.glob()` de Vite](https://vite.dev/guide/features.html#glob-import) est un moyen d'importer plusieurs fichiers à la fois en utilisant des motifs glob pour trouver des chemins de fichiers correspondants.

`import.meta.glob()` prend un [motif glob](#motifs-glob) relatif correspondant aux fichiers locaux que vous souhaitez importer comme paramètre. Il renvoie un tableau des exportations de chaque fichier correspondant. Pour charger tous les modules correspondants à l'avance, passez `{ eager: true }` comme deuxième argument :

```astro title="src/components/my-component.astro" {3,4}
---
// importe tous les fichiers qui se terminent par `.md` dans `./src/pages/post/`
const matches = import.meta.glob('../pages/post/*.md', { eager: true }); 
const posts = Object.values(matches);
---
<!-- Génère un <article> pour les 5 premiers articles du blog -->
<div>
{posts.slice(0, 4).map((post) => (
  <article>
    <h2>{post.frontmatter.title}</h2>
    <p>{post.frontmatter.description}</p>
    <a href={post.url}>Lire la suite</a>
  </article>
))}
</div>
```

Les composants Astro importés avec `import.meta.glob` sont de type [`AstroInstance`](#fichiers-astro). Vous pouvez effectuer le rendu de chaque instance de composant en utilisant sa propriété `default` :

```astro title="src/pages/component-library.astro" {8}
---
// importe tous les fichiers qui se terminent par `.astro` dans `./src/components/`
const components = Object.values(import.meta.glob('../components/*.astro', { eager: true }));
---
<!-- Affiche tous nos composants -->
{components.map((component) => (
  <div>
    <component.default size={24} />
  </div>
))}
```

### Valeurs prises en charge

La fonction `import.meta.glob()` de Vite ne prend en charge que les chaînes littérales statiques. Elle ne prend pas en charge les variables dynamiques ni l'interpolation de chaîne de caractères.

Une solution de contournement courante consiste à importer un ensemble de fichiers plus grand qui inclut tous les fichiers dont vous avez besoin, puis à les filtrer :

```astro {6-7}
---
// src/components/featured.astro
const { postSlug } = Astro.props;
const pathToMyFeaturedPost = `src/pages/blog/${postSlug}.md`;

const posts = Object.values(import.meta.glob("../pages/blog/*.md", { eager: true }));
const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost));
---

<p>
  Jetez un oeil à mon article préféré, <a href={myFeaturedPost.url}>{myFeaturedPost.frontmatter.title}</a>!
</p>
```

### Importer des utilitaires de type

#### Fichiers Markdown

Les fichiers Markdown chargés avec `import.meta.glob()` renvoient l'interface `MarkdownInstance` suivante :

```ts
export interface MarkdownInstance<T extends Record<string, any>> {
  /* Toutes les données spécifiées dans le frontmatter YAML/TOML de ce fichier */
	frontmatter: T;
  /* Le chemin d'accès absolu de ce fichier */
	file: string;
  /* Le chemin rendu de ce fichier */
	url: string | undefined;
  /* Composant Astro qui restitue le contenu de ce fichier */
	Content: AstroComponentFactory;
  /** (Markdown seulement) Contenu du fichier Markdown brut, à l'exclusion de la mise en page HTML et du frontmatter YAML/TOML */
	rawContent(): string;
  /** (Markdown seulement) Fichier Markdown compilé en HTML, à l'exclusion de la mise en page HTML */
	compiledContent(): string;
  /* Fonction qui renvoie un tableau des éléments h1...h6 dans ce fichier */
	getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>;
	default: AstroComponentFactory;
}
```

Vous pouvez éventuellement fournir un type pour la variable `frontmatter` à l'aide d'un générique TypeScript.

```astro
---
import type { MarkdownInstance } from 'astro';
interface Frontmatter {
    title: string;
    description?: string;
}

const posts = Object.values(import.meta.glob<MarkdownInstance<Frontmatter>>('./posts/**/*.md', { eager: true }));
---

<ul>
  {posts.map(post => <li>{post.frontmatter.title}</li>)}
</ul>
```

#### Fichiers Astro

Les fichiers Astro ont l'interface suivante :

```ts
export interface AstroInstance {
  /* Le chemin d'accès de ce fichier */
  file: string;
  /* L'URL de ce fichier (s'il se trouve dans le répertoire des pages) */
	url: string | undefined;
	default: AstroComponentFactory;
}
```

#### Autres fichiers

D'autres fichiers peuvent avoir différentes interfaces, mais `import.meta.glob()` accepte un générique TypeScript si vous savez exactement ce que contient un type de fichier non reconnu.

```ts
---
interface CustomDataFile {
  default: Record<string, any>;
}
const data = import.meta.glob<CustomDataFile>('../data/**/*.js');
---
```

### Motifs glob

Un motif glob est un chemin d'accès à un fichier qui prend en charge les caractères génériques spéciaux. Il est utilisé pour référencer plusieurs fichiers dans votre projet en même temps.

Par exemple, le motif glob `./pages/**/*.{md,mdx}` commence dans le sous-répertoire pages, parcourt tous ses sous-répertoires (`/**`) et correspond à tous les noms de fichier (`/*`) qui finissent soit par `.md` ou `.mdx` (`.{md,mdx}`).

#### Motifs glob dans Astro

Pour être utilisé avec `import.meta.glob()`, le motif glob doit être une chaîne littérale et ne peut contenir aucune variable.

En outre, les motifs glob doivent commencer par l'un des éléments suivants :
- `./` (pour commencer dans le répertoire actuel)
- `../` (pour démarrer dans le répertoire parent)
- `/` (pour démarrer à la racine du projet)

[En savoir plus sur la syntaxe des motifs glob](https://github.com/micromatch/picomatch#globbing-features).

#### `import.meta.glob()` vs `getCollection()`

[Les collections de contenu](/fr/guides/content-collections/) fournissent une [API `getCollection()`](/fr/reference/modules/astro-content/#getcollection) pour charger plusieurs fichiers au lieu de `import.meta.glob()`. Si vos fichiers de contenu (par exemple Markdown, MDX, Markdoc) sont situés dans des collections dans le répertoire `src/content/`, utilisez `getCollection()` pour [interroger une collection](/fr/guides/content-collections/#interroger-les-collections) et retourner les entrées de la collection.

## WASM

```js
// Charge et initialise le fichier WASM demandé
const wasm = await WebAssembly.instantiateStreaming(fetch('/example.wasm'));
```

Astro permet de charger des fichiers WASM directement dans votre application en utilisant l'API [`WebAssembly`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) du navigateur.


## Modules intégrés de Node

Astro prend en charge les modules intégrés de Node.js, avec certaines limitations, en utilisant le nouveau préfixe `node:` de Node. Des différences peuvent exister entre les modes développement et production, et certaines fonctionnalités peuvent être incompatibles avec le rendu à la demande. Certains [adaptateurs](/fr/guides/on-demand-rendering/) peuvent également être incompatibles avec ces modules intégrés ou nécessiter une configuration pour prendre en charge un sous-ensemble (par exemple, [Cloudflare Workers](/fr/guides/integrations-guide/cloudflare/) ou [Deno](https://github.com/denoland/deno-astro-adapter)).

L'exemple suivant importe le module `util` de Node pour analyser un type de média (MIME) :

```astro title="src/components/MonComposant.astro"
---
// Exemple : importer le module intégré « util » depuis Node.js
import util from 'node:util';

export interface Props {
  mimeType: string,
}

const mime = new util.MIMEType(Astro.props.mimeType)
---

<span>Type : {mime.type}</span>
<span>Sous-type : {mime.subtype}</span>
```

## Extension de la prise en charge des types de fichiers

Avec **Vite** et les modules d'extension **Rollup** compatibles, vous pouvez importer des types de fichiers qui ne sont pas pris en charge nativement par Astro. Pour savoir où trouver les modules d'extension dont vous avez besoin, consultez la section [Finding Plugins](https://vite.dev/guide/using-plugins.html#finding-plugins) de la documentation de Vite.

:::note[Configuration du module d'extension]
Référez-vous à la documentation de votre module d'extension pour connaître les options de configuration et savoir comment l'installer correctement.
:::

<RecipeLinks slugs={["fr/recipes/add-yaml-support"]} />
